<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    
    <title>注册</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="../js/jquery-1.4.3.js"></script>
		<script type="text/javascript">
		$(function(){	
			$("#txtEmail").blur(function(){
				
				$("#email\\.info").html("");//清空错误提示
				var emailTxt = $(this).val();//用户输入email
				var pattern=/\b(^['_A-Za-z0-9-]+(\.['_A-Za-z0-9-]+)*@([A-Za-z0-9-])+(\.[A-Za-z0-9-]+)*((\.[A-Za-z0-9]{2,})|(\.[A-Za-z0-9]{2,}\.[A-Za-z0-9]{2,}))$)\b/;
				if(emailTxt == ""){
					$("#email\\.info").html("邮箱地址不能为空!");
				}else if(!pattern.test(emailTxt)){
					$("#email\\.info").html("邮箱地址格式不正确!");
				}else{//唯一性检查
					$("#email\\.info").html("正在检测...");
					$.post(
						"checkemail.action",
						{"email":emailTxt},
						function(data){//data是服务器返回的ok属性值
							if(data){
								$("#email\\.info").html("该邮箱地址可用!");
								formFlag.email = true;
							}else{
								$("#email\\.info").html("该邮箱地址不可用!");
							}
						}
					);
				}
			});	
		});
		
		
		$(function(){
					$("#txtNickname").blur(function(){
					
					$("#name\\.info").html("");
					var nickName = $(this).val();
					var partten =  /^[\u4E00-\u9FA5A-Za-z0-9]{4,20}$/;
					if(nickName == ""){
						
						$("#name\\.info").html("昵称不能为空!");
					
					}else if(!partten.test(nickName)){
					
					$("#miss1").show();
						
					$("#name\\.info").html("格式不正确!");
			
					}else{
						$("#miss1").hide();
						$("#name\\.info").html("<img width=17px height=17px  src='../images/label3.gif'>&nbsp;&nbsp;<span style=color:green >昵称可用!</span>");
						formFlag.email = true;
					
					}
					
					})
		});
		$(function(){
						
				$("#password\\.info").html("");
						var partten = /^[A-Za-z0-9]{6,20}$/;
				$("#txtPassword").blur(function(){
	
				var txtpassword = $(this).val();

				if(txtpassword == ""){
					$("#password\\.info").html("在此处填入密码!");
					
				}else if(!partten.test(txtpassword)){
					
					$("#password\\.info").html("长度或者格式不正确!");
				
				}else{
					$("#miss2").hide();
					$("#password\\.info").html("<img width=16px height=16px src='../images/label3.gif'>&nbsp;&nbsp;<span style=color:green>密码可用!</span>");
					formFlag.email = true;	
				}		
				})
		});
		
		
		
			$(function(){
				$("#password1\\.info").html("");
				$("#txtRepeatPass").blur(function(){
				var txtpassword = $("#txtPassword").val();
				var txtpassword1 = $(this).val();
				//alert(txtpassword);
				if(txtpassword1==""){
					
					$("#password1\\.info").html("请确认密码!");
				
				}else 
				if(txtpassword==txtpassword1){
				
			//	$("#password1\\.info").html("不能匹配上述密码!");	
				$("#password1\\.info").html("<img width=16px height=16px src='../images/label3.gif'>&nbsp;&nbsp;<span style=color:green>正确!</span>");
				
				}else{
				$("#password1\\.info").html("请确认密码!");
				//$("#password1\\.info").html("正确!");
					
				}
			
			})
			
		
		});
		$(function(){
						
				$("#tel\\.info").html("");
			    var partten =/^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/; 
				$("#text").blur(function(){
	
				var txt = $(this).val();

				if(txt == ""){
					$("#tel\\.info").html("在此处填入手机号码!");
					
				}else if(!partten.test(txt)){
					
					$("#tel\\.info").html("长度或者格式不正确!");
				
				}
				})
		});
			
		</script>		

  </head>
  
  <body style="background-color:#31072d;color:white";>
	<%@ include file="head.jsp" %>
		<div class="fill_message">
			<form   name="ctl00" method="post" action="register" id="f">
				<h2 align="center">注册列表</h2>
				<table  align="center" class="tab_login">
					<tr>
						<td valign="top" class="w1">
							请填写您的Email地址：
						</td>
						<td>
							<input name="user.email" type="text" id="txtEmail"
								class="text_input" />
							<div class="text_left" id="emailValidMsg">
								<p>
									请填写有效的Email地址，作为您的用户名。
								</p>
								<span id="email.info" style="color: red"></span>
							</div>
						</td>
					</tr>
					<tr>
						<td valign="top" class="w1">
							设置您的昵称：
						</td>
						<td>
							<input name="user.name" type="text" id="txtNickname"
								class="text_input" />
							<div class="text_left" id="nickNameValidMsg">
								<p>
									您的昵称可以由小写英文字母、中文、数字组成，
								</p>
								<p>
									长度4－20个字符，一个汉字为两个字符。
								</p>
								<span id="name.info" style="color: red"></span>
							</div>
						</td>
					</tr>
					<tr>
						<td valign="top" class="w1">
							设置密码：
						</td>
						<td>
							<input name="user.password" type="password" id="txtPassword"
								class="text_input" />
							<div class="text_left" id="passwordValidMsg">
								<p>
									您的密码可以由大小写英文字母、数字组成，长度6－20位。
								</p>
								<span id="password.info" style="color: red"></span>
							</div>
						</td>
					</tr>
					<tr>
						<td valign="top" class="w1">
							再次输入您设置的密码：
						</td>
						<td>
							<input name="password1" type="password" id="txtRepeatPass"
								class="text_input" />
							<div class="text_left" id="repeatPassValidMsg">
								<span id="password1.info" style="color: red"></span>
							</div>
						</td>
					</tr>
					
					<tr>
						<td valign="top" class="w1">
							联系电话：
						</td>
						<td>
							<input name="user.tel" type="text" id="txttel"
								class="tel_input" />
							<div class="tel_left" id="repeatPassValidMsg">
							<p>
									请填写真实的手机号码
								</p>
								<span id="tel.info" style="color: red"></span>
							</div>
						</td>
					</tr>
					
					
					<tr>
						<td valign="top" class="w1">
							经常玩的游戏：
						</td>
						<td>
							<input name="user.play" type="text" id="txtplay"
								class="tel_input" />
							<div class="tel_left" id="repeatPassValidMsg">
							<p>
									
								</p>
								<span id="tel.info" style="color: red"></span>
							</div>
						</td>
					</tr>
					
					
					<tr>
						<td valign="top" class="w1">
							游戏所在的服务器：
						</td>
						<td>
							<input name="user.area" type="text" id="txtarea"
								class="tel_input" />
							<div class="tel_left" id="repeatPassValidMsg">
							<p>
									
								</p>
								<span id="tel.info" style="color: red"></span>
							</div>
						</td>
					</tr>
					
					
					<tr>
						<td valign="top" class="w1">
							联系地址：
						</td>
						<td width="400">
							<input name="user.address" type="text" id="adrtxt"
								class="adr_input" />
							<div class="adr_left" id="repeatPassValidMsg">
							<p>
									请填写真实的联系地址
								</p>
								<span id="adr.info" style="color: red"></span>
							</div>
						</td>
					</tr>	
				</table>

				<div class="login_in" align="center">
					<input id="btnClientRegister" class="button_1" name="submit"
						type="submit" value="注 册"  />
					<span id="spancheck" style="color: red;"></span>
				</div>
			</form>
		</div>
		 
	</body>
</html>
